<template>
<div>
  <el-steps :active="active" finish-status="success" style="width:900px">
    <el-step title="试卷基本信息"></el-step>
    <el-step title="添加试题"></el-step>
    <el-step title="试卷设置"></el-step>
  </el-steps>
  <div style="margin-top: 36px">

    <el-select v-model="type" clearable placeholder="请选择试题类型" style="width: 160px">
      <el-option
          v-for="item in options"
          :key="item.type"
          :label="item.label"
          :value="item.type">
      </el-option>
    </el-select>

      <el-cascader
          style="width: 160px;margin-left: 20px;"
          collapse-tags
          v-model="poolValue"
          placeholder="请选择题库"
          :options="pool1"
          :props="props"
          clearable >
      </el-cascader>

<!--    <el-select v-model="pool_id" clearable placeholder="请选择题库" style="margin-left: 20px;width: 120px">-->
<!--      <el-option-->
<!--          v-for="item1 in options1"-->
<!--          :key="item1.pool_id"-->
<!--          :label="item1.label1"-->
<!--          :value="item1.pool_id">-->
<!--      </el-option>-->
<!--    </el-select>-->
<!--    <el-select v-model="value2" placeholder="请选择年级" style="margin-left: 20px;width: 120px">-->
<!--      <el-option-->
<!--          v-for="item1 in options2"-->
<!--          :key="item1.value2"-->
<!--          :label="item1.label2"-->
<!--          :value="item1.value2">-->
<!--      </el-option>-->
<!--    </el-select>-->
<!--    <div class="block">-->
<!--      <el-cascader-->
<!--          :options="options1"-->
<!--          :props="props"-->
<!--          clearable></el-cascader>-->
<!--    </div>-->

    <el-select v-model="level" clearable placeholder="请选择难度" style="margin-left: 20px;width: 120px">
      <el-option
          v-for="item1 in options3"
          :key="item1.level"
          :label="item1.label3"
          :value="item1.level">
      </el-option>
    </el-select>
    <el-input v-model="content" placeholder="请输入试题提干" style="margin-left: 20px;width: 140px"></el-input>
    <el-button type="primary" style="margin-left: 20px" @click="search">搜索</el-button>
    <el-badge :value="titleByType['1']" class="item" style="margin-left: 18px">
      <el-button size="small">单选</el-button>
    </el-badge>
    <el-badge :value="titleByType['2']" class="item" style="margin-left: 18px">
      <el-button size="small">多选</el-button>
    </el-badge>
    <el-badge :value="titleByType['3']" class="item" type="primary" style="margin-left: 18px">
      <el-button size="small">判断</el-button>
    </el-badge>
    <el-badge :value="titleByType['4']" class="item" type="warning" style="margin-left: 18px">
      <el-button size="small">填空</el-button>
    </el-badge>
    <el-table
        :data="tableData"
        border
        style="width: 70%;margin-top: 20px">
      <el-table-column
          prop="id"
          label="id"
          width="50">
      </el-table-column>
      <el-table-column
          label="试题类型"
          width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.type==1">单选题</span>
          <span v-if="scope.row.type==2">多选题</span>
          <span v-if="scope.row.type==3">判断题</span>
          <span v-if="scope.row.type==4">填空题</span>
        </template>

      </el-table-column>
      <el-table-column

          label="难度" width="50">
        <template slot-scope="scope">
          <span v-if="scope.row.level==1">简单</span>
          <span v-if="scope.row.level==2">一般</span>
          <span v-if="scope.row.level==3">困难</span>

        </template>
      </el-table-column>
      <el-table-column
          prop="content"
          label="试题题干"
          width="200">
      </el-table-column>
      <el-table-column
          prop="create_time"
          label="创建时间"
          width="200">
      </el-table-column>
<!--      <el-table-column label="选项"-->
<!--                       width="200">-->
<!--        <template slot-scope="scope">-->
<!--          <el-row v-for="option in scope.row.options" >-->
<!--           {{option.toString()}}-->
<!--          </el-row>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
          prop="update_time"
          label="修改时间"
          width="200">
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope" >
          <el-button
              :disabled="scope.row.is_add =='1'"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)" >添加试题</el-button>
          <el-button
              size="mini"
              :disabled="scope.row.is_delete =='1'"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除试题</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        v-bind:child-msg="pageparm"
        @current-change="handleCurrentChange"
        :current-page="pageparm.currentPage"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageparm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageparm.total" style="margin-left:200px;margin-top:16px">
    </el-pagination>

    <div style="margin-left: 300px;margin-top: 50px">
      <el-button type="primary" @click="before">上一步</el-button>
      <el-button type="primary" @click="after">下一步</el-button>

    </div>
  </div>

</div>
</template>

<script>

import select123 from "views/paper/select";
export default {
  name: "fixed.vue",
  components:{select123},


  created() {

    let paperMessage = this.$route.query.paperMessage

    this.getPaperMessage(paperMessage)
    this.findQuestionType()
    this.findQuestionLevel()
    this.findAll()
    this.findPool()

  },
  data(){
    return{
      poolValue:[],
      //题目类型统计
      titleByType:{
        1:0,
        2:0,
        3:0,
        4:0
      },
      //分页数据
      formInline: {
        //设置加载初始页
        page: 1,
        //设置加载初始条数
        limit: 5,
      },
      paperMessage: null,
      // 分页组件参数
      pageparm:{
        currentPage:1,
        pageSize:5,
        total:20,
      },


      active: 1,
      // options: [{
      //   type: '1',
      //   label: '单选'
      // }, {
      //   type: '2',
      //   label: '多选'
      // }, {
      //   type: '3',
      //   label: '填空'
      // }, {
      //   type: '4',
      //   label: '判断'
      // },
      //   ],

       options: [],
      //题库模拟数据
      //  options1: [
      //   //   {
      // //   value1: 'english',
      // //   label1: '英语'
      // // },
      //  {
      //    pool_id: '1,4',
      //   label1: '语文'
      // }, {
      //   pool_id: '2,5,6',
      //   label1: '数学'
      // },
      //],
      count : 0,
      // options3: [
      //   {
      //     level: '1',
      //     label3: '简单'
      //   }, {
      //     level: '3',
      //     label3: '困难'
      //   }, {
      //     level: '2',
      //     label3: "一般"
      //   },
      // ],
      options3:[],
      type: '',
      pool_id:"",
      level:"",
      content:"",
      tableData:[],
      subject:{
        "type":null,
        "level":null,
        "content":null,
        "options":null,
        "answer":null

      },
      props: {
        multiple: true, // true:多选属性;默认false：单选
      },
      pool : [

      ],
      pool1:null,
      fatherCount:0,
      sonCount:0

    }
  },
  methods:{
    findQuestionType(){
      this.$axios.post('http://localhost:8080/question/findQuestionType').
      then(res=>{

        let data =res.data.data
        for (let i of data){

          if(i ==1){
            this.options[0]={
              type: '1',
              label: '单选'
            }
          }
          if(i ==2){
            this.options[1]={
              type: '2',
              label: '多选'
            }
          }
          if(i ==3){
            this.options[2]={
              type: '3',
              label: '判断'
            }
          }
          if(i ==4){
            this.options[3]={
              type: '4',
              label: '填空'
            }
          }
        }
      }).catch()


    },
    findQuestionLevel(){
      this.$axios.post('http://localhost:8080/question/findQuestionLevel')
          .then(
              res=>{
                let data = res.data.data
                for (let i of data){
                  if(i==1){
                    this.options3[0] = {
                      level: '1',
                      label3: '简单'
                    }
                  }
                  if(i==2){
                    this.options3[1] = {
                      level: '2',
                      label3: '一般'
                    }
                  }
                  if(i==3){
                    this.options3[2] = {
                      level: '3',
                      label3: '困难'
                    }
                  }
                }
              }
          ).catch()
    },
    findAll(){
      this.$axios.post('http://localhost:8080/question/findByCondition',{
        "type":this.type,"level":this.level,"content":this.content,"pool_id":this.pool_id,
        "formInline":this.formInline
      },).then(res=>{

        let data = res.data.data.list
        let time= null
        let time1= null
        for (let i of data){
          time = i.update_time
          i.update_time =  time.replace("T"," ")
          i.create_time = i.create_time.replace("T"," ")
        }
        this.tableData = data
        this.pageparm.currentPage = this.formInline.page
        this.pageparm.pageSize = this.formInline.limit
        this.pageparm.total = res.data.data.total
      }).catch()
    },
    findPool(){
      this.$axios.post('http://localhost:8080/myPool/findPool').
      then(res=>{
        let pool = []
        let data = res.data.data
        for (let i of data){
          if(i.fid == null){
            this.pool[this.fatherCount] = {
              "value": i.id,
              "label": i.poolName,
              "children": []
            }
            this.fatherCount+=1
          }
          if(i.fid !=null){
            this.pool[i.fid-1].children[this.sonCount]= {
              "value":i.id,
              "id" : i.id,
              "label":i.poolName
            }
            this.sonCount+=1
          }

        }

        this.pool1 = this.pool


      }).catch()
    },

    getPaperMessage(papaerMessage){
      this.paperMessage = papaerMessage
    },

    search(){

      let j = this.poolValue
      let s = ""
      for(let i of j){
        console.log(i)
        s+=i+","
      }
      console.log(s)
      this.$axios.post('http://localhost:8080/question/findByCondition',{
        "type":this.type,"level":this.level,"content":this.content,"pool_id":s,
        "formInline":this.formInline
      },).then(res=>{
        console.log(res.data.data)
        let data = res.data.data.list
        let time= null
        let time1= null
        for (let i of data){
         time = i.update_time
         i.update_time =  time.replace("T"," ")
          i.create_time = i.create_time.replace("T"," ")
        }
        this.tableData = data
        this.pageparm.currentPage = this.formInline.page
        this.pageparm.pageSize = this.formInline.limit
        this.pageparm.total = res.data.data.total
      }).catch()
    },
    after(){
      // this.$router.push('/set')
      console.log(this.titleByType)
      this.paperMessage.titleScore = this.titleByType
      this.$router.push({path:'/set',query:{paperMessage:this.paperMessage}})
    },
    before(){
      this.$router.push('/message')
    },
    handleEdit(index, row) {
      if(row.is_delete ==1){
        row.is_delete = 0
      }
      row.is_add = 1
      this.titleByType[row.type]+=1
      // this.subject.answer = row.answer
      // this.subject.level = row.level
      // this.subject.content = row.content
      // this.subject.options = row.options
      // this.subject.difficulty = row.difficulty
      this.paperMessage.subject[this.count] =row

      this.count++
      console.log( this.paperMessage.subject)

      this.$message('添加成功');

    },

    handleDelete(index, row) {
      if(row.is_add == 1){

        row.is_add = 0
      }
      row.is_delete = 1
      this.titleByType[row.type]-=1
      this.count--
      for(let i in this.paperMessage.subject){
        if(this.paperMessage.subject[i].content == row.content){
          this.paperMessage.subject.splice(i,1)
        }
      }
      //this.paperMessage.subject[this.count] = null,
          //this.paperMessage.subject.splice(index,1)
      console.log( this.paperMessage.subject)
      this.$message('删除成功');


    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.limit =val
      this.formInline.page = 1
      //this.findAll(this.formInline)
      this.search()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.page = val
      //this.findAll(this.formInline)
      this.search()
    },
  }
}
</script>

<style scoped>

</style>